<template>
  <div>
    <Form :model="personal" :label-width="80">
      <FormItem label="头像">
        <Avatar shape="square" :src="personal.avatar" icon="ios-person" size="large" />
      </FormItem>
      <FormItem label="账户名">
        <Input type="text" v-model="personal.username" disabled></Input>
      </FormItem>
      <FormItem label="角色类型">
        <Input type="text" v-model="personal.role" disabled></Input>
      </FormItem>
      <FormItem label="手机号码">
        <Input type="number" v-model="personal.mobile" disabled></Input>
      </FormItem>
      <FormItem label="电子邮箱">
        <Input type="email" v-model="personal.email" disabled></Input>
      </FormItem>
      <FormItem label="性别">
        <RadioGroup v-model="personal.sex">
          <Radio :label="1" border>男</Radio>
          <Radio :label="0" border>女</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="出生日期">
        <DatePicker :value="personal.birthday" format="yyyy年MM月dd日" type="date" placeholder="出生日期"></DatePicker>
      </FormItem>
    </Form>
  </div>
</template>

<script>
export default {
  props: {
    personalInfo: {
      type: Object,
      default: () =>{}
    }
  },
  data () {
    return {
      personal: this.personalInfo
    };
  },
  methods: {

  }
};
</script>

<style>
</style>
